<template>
  <div class="home">
    <!-- 模糊背景 -->
    <div class="song-bg" :style="`background-image:url(${aaa})`"></div>

    <!-- 头部导航 -->
    <div class="header">
      <van-icon name="arrow-left" size="20" class="left-incon" />
      <div v-show="isLyricShow" class="he-text" v-if="songInfo.ar">
        <p>{{ songInfo.name }}</p>
        <p>{{ songInfo.ar[0].name }}</p>
      </div>
      <i class="iconfont icon-31fenxiang"></i>
    </div>

    <!-- 播放盒子 -->
    <div @click="isLyricShow = !isLyricShow" v-show="!isLyricShow">
      <div class="song-msg">
        <h2 class="m-song-h2">
          <span class="m-song-sname" v-if="songInfo.ar"
            >{{ songInfo.name }}--{{ songInfo.ar[0].name }}</span
          >
        </h2>
      </div>
      <div class="song-wrapper">
        <!-- 图片 -->
        <div
          class="song-turn ani"
          :style="`animation-play-state:${playState ? 'running' : 'paused'}`"
        >
          <div class="song-img">
            <img :src="aaa" alt="" />
          </div>
        </div>
        <!-- 磁针 -->
        <div
          class="cizheng"
          :style="`transform: rotate(${playState ? '-7deg' : '-38deg'})`"
        ></div>
      </div>
    </div>

    <!-- 歌词盒子 -->
    <div
      ref="lyric"
      class="song-lyric"
      @click="isLyricShow = !isLyricShow"
      v-show="isLyricShow"
    >
      <p
        :class="key === righttime ? 'active' : ''"
        v-for="(val, key, index) in lyric"
        :key="index"
      >
        {{ val }}
      </p>
    </div>

    <!-- 底部组件 -->
    <div class="song-footr">
      <div class="song-footr-t">
        <i class="iconfont icon-aixin"></i>
        <i class="iconfont icon-xiazai"></i>
        <i class="iconfont icon-yichang"></i>
        <i class="iconfont icon-pinglun"></i>
        <i class="iconfont icon-gengduo-shuxiang"></i>
      </div>
      <div class="song-footr-c">
        <input
          type="range"
          min="0"
          :max="duration"
          v-model="currentTime"
          class="range"
        />
      </div>
      <div class="song-footr-b">
        <i class="iconfont icon-suijibofang"></i>
        <i class="iconfont icon-zuobofang"></i>
        <span @click="audioStart">
          <i v-show="!playState" class="iconfont icon-bofang"></i>
          <i v-show="playState" class="iconfont icon-zanting"></i>
        </span>
        <i class="iconfont icon-youbofang"></i>
        <i class="iconfont icon-gengduo-"></i>
      </div>
    </div>

    <!-- 音频 -->
    <audio ref="audio" @timeupdate="updateTime" :src="music"></audio>
  </div>
</template>

<script>
import { SongApi, getLyricApi, getMusicApi } from "@/request/api";
import { mapState, mapMutations } from "vuex";
export default {
  name: "HomeView",
  data() {
    return {
      // // 播放暂停按钮切换
      // playState: false,
      // 播放界面和歌词界面切换
      isLyricShow: false,
      // 歌曲信息
      songInfo: {},
      // 歌词信息
      lyric: {},
      // 音乐地址
      music: "",
      // 当前时间
      currentTime: 0,
      // 歌曲总时长
      duration: 0,
      // 图片信息
      aaa: "",
      righttime: "",
    };
  },
  components: {},
  computed: {
    ...mapState(["playState"]),
  },
  methods: {
    ...mapMutations(["updatePlayState"]),
    updateTime(e) {
      // console.log(e.target.currentTime);
      this.currentTime = e.target.currentTime;
    },
    // 点击播放按钮
    audioStart() {
      if (!this.playState) {
        this.$refs.audio.play();
        this.updatePlayState(true);
      } else {
        this.$refs.audio.pause();
        this.updatePlayState(false);
      }
    },
    // 获取歌曲详情
    getSong() {
      SongApi().then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.songInfo = res.data.songs[0];
          this.aaa = this.songInfo.al.picUrl;
        }
      });
    },
    // 获取歌词
    getlyric() {
      getLyricApi().then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          let lyrics = res.data.lrc.lyric;
          let obj = {};
          let reg = /\[(.*?)](.*)/g;
          lyrics.replace(reg, (a, b, c) => {
            b = b.slice(0, 5);
            obj[b] = c;
            // console.log(b, c);
          });
          this.lyric = obj;
          this.$refs.audio.ontimeupdate = () => {
            // console.log(this.lyric, "this.lyric");
            let time = this.trandTime(this.$refs.audio.currentTime);
            if (time in this.lyric) {
              this.righttime = time;
            }
          };
        }
      });
    },
    trandTime(time) {
      let min = Math.floor(time / 60);
      min < 10 ? (min = "0" + min) : min;
      let sec = Math.floor(time % 60);
      sec < 10 ? (sec = "0" + sec) : sec;
      return `${min}:${sec}`;
    },
    // 获取音乐
    getmusic() {
      getMusicApi().then((res) => {
        // console.log(res);
        this.music = res.data.data[0].url;
      });
    },
    // 获取总时长
    getSongLong() {
      this.duration = this.$refs.audio.duration;
    },
  },
  mounted() {
    this.getSong();
    this.getlyric();
    this.getmusic();
  },
  updated() {
    this.getSongLong();
  },
  watch: {
    currentTime(nv) {
      let p = document.querySelector("p.active");
      // console.log([p]);
      // if (p.offsetTop > 200) {
      //   this.$refs.lyric.scrollTop = p.offsetTop - 200;
      // }
      if (p != null) {
        // console.log([p]);
        if (p.offsetTop > 200) {
          this.$refs.lyric.scrollTop = p.offsetTop - 200;
        }
      }
      if (nv === this.duration) {
        this.playState = false;
        this.currentTime = 0;
      }
    },
  },
};
</script>
<style lang = "less" scoped>
@import "../assets/base.less";
.home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  .song-bg {
    /* background: url("http://p1.music.126.net/Xqi_9FN9ikLx7X3ChTR7jw==/109951165623877859.jpg?param=140y140")
      no-repeat; */
    /* background-color: #161824; */
    /* background-position: 50%; */
    background-size: auto 100%;
    transform: scale(1.5);
    transform-origin: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    opacity: 1;
    /* 模糊背景 */
    filter: blur(25px);
    &::before {
      /*纯白色的图片做背景, 歌词白色看不到了, 在背景前加入一个黑色半透明蒙层解决 */
      content: " ";
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }
  .header {
    width: 100%;
    height: 50px;
    .left-incon,
    .iconfont,
    .he-text {
      position: absolute;
      font-size: 24px;
      z-index: 10001;
      color: #fff;
    }
    .left-incon {
      top: 10px;
      left: 10px;
    }
    .iconfont {
      top: 10px;
      right: 10px;
    }
    .he-text {
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      font-size: 14px;
      text-align: center;
    }
  }
  .song-msg {
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    .m-song-h2 {
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .song-wrapper {
    position: fixed;
    width: 247px;
    height: 247px;
    left: 50%;
    top: 150px;
    transform: translateX(-50%);
    z-index: 1;
    .song-turn {
      width: 100%;
      height: 100%;
      background: url("../assets/img/bg.png") no-repeat;
      background-size: 100%;
      &.ani {
        animation: turn 5s linear infinite;
      }
      .song-img {
        width: 154px;
        height: 154px;
        position: absolute;
        left: 50%;
        top: 50%;
        overflow: hidden;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .cizheng {
      background: url("../assets/img/needle-ab.png") no-repeat;
      position: absolute;
      background-size: contain;
      width: 73px;
      height: 118px;
      top: -40px;
      left: 112px;
      transform: rotate(-38deg);
      transform-origin: left top;
      transition: 0.5s;
    }
  }
  .song-lyric {
    width: 100%;
    height: 75%;
    position: fixed;
    z-index: 1;
    text-align: center;
    color: rgb(255, 255, 255, 0.8);
    overflow: auto;
    font-size: 14px;
    /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none;
    }
    p {
      height: 40px;
      line-height: 40px;
      &.active {
        color: rgb(17, 204, 57);
        font-size: 18px;
      }
    }
  }
  .song-footr {
    position: fixed;
    width: 100%;
    left: 50%;
    bottom: 0px;
    /* background-color: pink; */
    transform: translateX(-50%);
    z-index: 10001;
    .song-footr-t,
    .song-footr-c,
    .song-footr-b {
      .iconfont {
        font-size: 25px;
        color: #fff;
        &.icon-bofang,
        &.icon-zanting {
          font-size: 40px;
        }
      }
    }
    .song-footr-t {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .song-footr-c {
      height: 40px;
      .range {
        width: 100%;
        height: 3px;
      }
    }
    .song-footr-b {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 20px;
    }
  }
}
/* 图片旋转动画 */
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>
